<template>
  <view class="follow-item" @click="toDetail">
    <view class="page-container">
      <view class="content">
        <view class="avatar">
          <image src="@/static/image/common/test.png" mode="aspectFill" />
        </view>

        <view class="title"> 我是打酱油 </view>

        <view class="content-text flex flex-middle">
          关注于
          <text> 2025-03-19 10:32 </text>
        </view>

        <view
          class="chat-btn flex flex-middle flex-center"
          @click.stop="sendMsg"
        >
          发消息
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  props: {},
  methods: {
    sendMsg() {
      this.$dialog({
        content: "即将开放，敬请期待！",
      });
    },
    toDetail() {
      this.$navigateTo(`/pages/craftsman/detail?id=${1}`);
    },
  },
};
</script>
  
<style scoped lang="scss">
.follow-item {
  border-bottom: 1px solid #efefef;

  .content {
    padding: 16px 22px;
    height: 100%;
    overflow: hidden;
    position: relative;

    .chat-btn {
      position: absolute;
      right: 16px;
      top: 50%;
      width: 72px;
      height: 28px;
      margin-top: -14px;
      border: 1px solid #cbcbcb;
      border-radius: 28px;
      color: #666666;
    }

    &-text {
      font-size: 12px;
      color: #7d7d7d;
      margin-top: 4px;

      text {
        color: #aeaeae;
        margin-left: 6px;
      }
    }

    .title {
      color: #212121;
      font-size: 16px;
      margin-top: 6px;
    }

    .avatar {
      float: left;
      margin-right: 12px;

      image {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
    }
  }
}
</style>
  